<template>
  <div class="page">
    <Navbarelder title="掌上中介" />
    <img src="../../assets/home/banner.png" >
    <div class="topskip">
      <div class="skipbox" @click="routerJump('/mediation-elder')">
        <img src="../../assets/home/icon12.png" >
        <div>中介基础信息</div>
      </div>
      <div class="skipbox" @click="routerJump('/mediation-rank-elder')">
        <img src="../../assets/home/icon13.png" >
        <div>中介排行</div>
      </div>
      <div class="skipbox">
        <img src="../../assets/home/icon14.png" >
        <div>联合中介服务</div>
      </div>
    </div>
    <div class="linetitle">
      <div class="line"/>
      最新评价
    </div>
    <div class="content" style="padding-top: 0;">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="list-item"
            @click="routerJump1(item, index + 1)"
          >
            <div class="score f-r a-c">
              机构名称：{{ item.corporateName }}
            </div>
            <div class="score f-r a-c">
              项目名称：{{ item.projectName }}
            </div>
            <div class="score f-r a-c">
              事项名称：{{ item.eventName }}
            </div>
            <div class="score f-r a-c">
              综合评分：
              <van-rate
                v-model="item.score"
                allow-half
                :size="12"
                color="#EA9518"
                void-icon="star"
                void-color="#eee"
              />
              <span class="score-value">{{ item.score }}</span>
            </div>
            <div class="score f-r a-c">
              追加评价：{{ getchoice(item.choice) }}
            </div>
            <div class="score f-r a-c">
              评价理由：{{ item.comment }}
            </div>
            <div class="score f-r a-c">
              评价时间：{{ item.createTime }}
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_mediation } from '@/api'
import { Toast } from 'vant'
export default {
  name: 'Mediation',
  mixins: [refresh],
  data() {
    return {
      filterIcon: require('@/assets/home/filter.png'),
      tableData: [
      ],
      unitType: ''
    }
  },
  methods: {
    routerJump1(item, index) {
      this.$router.push({
        path: '/mediation-detail-elder',
        query: {
          userId: item.userId,
          id: item.intermediaryId,
          index: index
        }
      })
    },
    onRefresh() {
      this.pageNo = 1
      this.getList()
    },
    getList() {
      if (this.pageNo > 1 && this.tableData.length >= this.totalSize) return Toast('没有更多了')
      // const { type } = this.$route.query
      http_mediation.pageList({
        ...this.getQueryParams()
      }).then(res => {
        if (this.pageNo === 1) {
          this.tableData = res.data.records.map(el => {
            return {
              ...el
            }
          })
        } else {
          this.tableData = [
            ...this.tableData,
            ...res.data.records.map(el => {
              return {
                ...el
              }
            })
          ]
        }
        this.totalSize = res.data.total
        this.refreshLoading = false
      })
    },
    getchoice(list) {
      const arr = ['', '速度快', '服务好', '技术强', '诚信优']
      let arrstring = ''
      if (list !== null) {
        list = list.substring(1, list.length - 1).split(',')
        const arrlist = []
        for (let i = 0; i < list.length; i++) {
          arrlist.push(arr[list[i]])
        }
        arrstring = arrlist.toString()
      }
      return arrstring
    }
  }
}
</script>

    <style scoped lang="scss">
    .page {
      .topskip{
      display: flex;
      height: 204px;
      background: #FFFFFF;
      margin-top: 15px;
      justify-content: space-around;
      .skipbox{
          width: 130px;;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 18px;
          text-align: center;
          div{
              margin-bottom: 20px;
          }
          img{
              width: 36px ;
              margin-top: 25px;
              margin-bottom: 11px;
          }
      }
    }
    .linetitle{
      margin: 11.5px 0 17px 19px;
      height: 22px;
      font-size: 19px;
      line-height: 25px;
      display: flex;
      .line{
          width: 3px;
          height: 22px;
          background: #3588CF;
          border-radius: 3px;
          margin-right: 11.5px;
      }
    }
        .list {
            .list-item {
                padding: 4px 15px 7px 15px;
                background-color: #fff;
                border-radius: 5px;
                margin-bottom: 12.5px;
                .score {
                    font-size: 17px;
                    line-height: 28px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    .score-value{
                      margin-left: 7px;
                      color: #EA9518;
                    }
                }
            }
        }
    }
    </style>
